<template>
  <div class="login-container">
    <el-form
      ref="registerForm"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="form"
    >
      <h2>用户注册</h2>
      <el-form-item prop="username" label="邮箱">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item prop="nickname" label="昵称">
        <el-input v-model="form.nickname"></el-input>
      </el-form-item>
      <el-form-item prop="captcha" label="验证码">
        <el-input v-model="form.captcha" style="width: 50%" />
        <img :src="code.captcha" alt="" @click="updateCaptcha" />
      </el-form-item>
      <el-form-item prop="mailCaptcha" label="邮箱验证码">
        <el-input v-model="form.mailCaptcha" style="width: 60%" />
        <el-button
          type="primary"
          class="send-btn"
          :disabled="code.status"
          @click="sendCode"
        >
          {{ code.text }}
        </el-button>
      </el-form-item>
      <el-form-item prop="password" label="密码" type="password">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item prop="repassword" label="确认密码" type="password">
        <el-input v-model="form.repassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleRegister">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Md5 from 'md5'
import { MessageBox } from 'element-ui'
export default {
  layout: 'login',
  data() {
    return {
      form: {
        username: '',
        mailCaptcha: '',
        password: '',
        repassword: '',
        nickname: '',
        captcha: '',
      },
      code: {
        text: '发送验证码',
        captcha: '',
        status: false,
      },
      rules: {
        username: [
          { required: true, message: '请输入邮箱' },
          { type: 'email', message: '请输入正确的邮箱格式' },
        ],
        password: [
          { required: true, message: '请输入密码' },
          { pattern: /^[\w_-]{6,12}$/g, message: '请输入6-12位的密码' },
        ],
        nickname: { required: true, message: '请输入昵称' },
        captcha: [
          { required: true, message: '请输入验证码' },
          { pattern: /^\w{4}$/g, message: '请输入4位验证码' },
        ],
        mailCaptcha: [
          { required: true, message: '请输入验证码' },
          { pattern: /^\w{4}$/g, message: '请输入4位验证码' },
        ],
        repassword: [
          {
            required: true,
            message: '请再次输入密码',
          },
          {
            validator: (rules, value, callback) => {
              if (value !== this.form.password) {
                return callback(new Error('两次输入的密码不一致'))
              }
              return callback()
            },
          },
        ],
      },
    }
  },
  mounted() {
    this.updateCaptcha()
  },
  methods: {
    sendCode() {
      let time = 60
      const timer = setInterval(() => {
        if (timer < 0) {
          this.code.status = false
          clearInterval(timer)
        }
        this.code.status = true
        this.code.text = `已发送(${time})`
        time--
      }, 1000)
    },
    updateCaptcha() {
      this.code.captcha = '/api/captcha?_t' + new Date().getTime()
    },
    handleRegister() {
      this.$refs.registerForm.validate(async (vaild) => {
        if (vaild) {
          console.log('校验成功')
          const obj = {
            email: this.form.username,
            passwd: Md5(this.form.password),
            nickname: this.form.nickname,
            captcha: this.form.captcha,
          }
          const ret = await this.$http.post('/user/register', obj)
          // this.$router.push('/user/login')
          console.log('ret', ret)
          if (ret.code === 0) {
            MessageBox.confirm('注册成功，请登录', '登录', {
              confirmButtonText: '确定',
              showCancelButton: false,
              type: 'success',
              callback: () => {
                this.$router.push('/user/login')
              },
            })
          } else {
            this.$message('注册失败')
          }
        }
      })
      // this.$http.post('/user/register', )
    },
  },
}
</script>

<style lang="scss">
.send-btn {
  float: right;
  margin-left: 10px;
}
</style>
